<template>
  <div class="app-container">
    <aside>
      <el-form ref="form" class="search-form" :model="form" label-width="80px" inline>
        <el-form-item>
          <el-select v-model="form.company">
            <el-option :value="0" label="请选择品牌" />
            <el-option v-for="(item, index) of company.array" :key="'c' + index" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.type">
            <el-option value="" label="请选择类型" />
            <el-option v-for="(item, index) of types" :key="'t' + index" :value="item" :label="item + '类'" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.province">
            <el-option label="选择省份" :value="0" />
            <el-option v-for="(item, index) of provinces" :key="'pro' + index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="tableData.current_page = 0">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" @click="open">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-upload" @click="showImport">导入</el-button>
        </el-form-item>
      </el-form>
    </aside>
    <el-container>
      <el-main class="pd-0">
        <el-table :data="tableData.data" border stripe>
          <el-table-column type="index" label="#" />
          <el-table-column prop="company_name" label="企业" />
          <el-table-column prop="type" label="类型" />
          <el-table-column prop="province_name" label="省份" />
          <el-table-column prop="city_name" label="城市" />
          <el-table-column label="管理">
            <template slot-scope="{row, $index}">
              <el-button type="primary" size="mini" @click="deleteCity($index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <my-page :data="tableData" @change="page => { tableData.current_page = page }" />
      </el-main>
      <el-footer>
        <orm-create ref="ormModel" title="城市信息" :form-data.sync="city" @submit="saveCity" />
        <orm-import ref="importModel" :template-file="templateFile" :columns="templateColumns" @submit="handlerImport" />
      </el-footer>
    </el-container>
  </div>
</template>

<script>

import company from '@/api/company'
import orm from '@/api/orm'
import city from '@/api/city'

import ImportTemplate from '@/config/importTemplate'

import OrmCreate from '@/components/ORM/Create'
import OrmImport from '@/components/ORM/Import'
import MyPage from '@/components/MyPage/index'

export default {
  name: 'CityIndex1',
  components: { OrmImport, OrmCreate, MyPage },
  data() {
    return {
      form: {
        company: 0,
        type: '',
        province: 0
      },
      types: ['A', 'B', 'C'],
      company: { array: [], json: {}},
      tableData: {
        data: [],
        current_page: 0,
        per_page: 0,
        total: 0
      },
      provinces: [],
      cityId: 0,
      city: {
        company: { title: '拍摄商', type: 'select', items: [] },
        type: { title: '类型', type: 'select', items: [{ value: 'A', label: 'A类' }, { value: 'B', label: 'B类' }, { value: 'C', label: 'C类' }] },
        city_id: { title: '城市', type: 'city', len: 2 }
      },
      templateColumns: ImportTemplate.city,
      templateFile: process.env.VUE_APP_HOST + '/file/city.xlsx'
    }
  },
  watch: {
    'company.array'() {
      this.city.company.items = this.company.array
    },
    'tableData.current_page'() {
      this.getCities()
    }
  },
  created() {
    this.getCompanies()
    this.getProvinces()
  },
  methods: {
    getProvinces() {
      city.index(0).then(res => {
        this.provinces = res.data
      })
    },
    getCompanies() {
      company.list().then(res => {
        this.company = res
        this.getCities()
      }).catch(res => {})
    },
    getCities() {
      const where = []
      if (this.form.company) {
        where.push(['company', '=', this.form.company])
      }
      if (this.form.type) {
        where.push(['type', '=', this.form.type])
      }
      if (this.form.province) {
        where.push(['province_id', '=', this.form.province])
      }
      orm.list('CompanyCity', where, this.tableData.current_page, { province_name: 'desc' }).then(res => {
        const cities = res.data
        for (const key in cities.data) {
          const city = cities.data[key]
          cities.data[key].company_name = this.company.json[city.company].name
        }
        this.tableData = cities
      })
    },
    open() {
      this.$refs.ormModel.open()
    },
    saveCity(data) {
      this.$refs.ormModel.close()
      orm.detail('City', data.city_id).then(res => {
        const cityInfo = res.data
        data.city_name = cityInfo.city_name
        data.province_name = cityInfo.province_name
        data.province_id = cityInfo.province_id
        if (this.cityId === 0) {
          orm.create('CompanyCity', data).then(res => {
            this.getCities()
          })
        } else {
          orm.update('CompanyCity', this.cityId, data).then(res => {
            this.getCities()
          })
        }
      })
    },
    deleteCity(index) {
      console.log(index)
      this.$confirm('确定删除吗').then(res => {
        orm.delete('CompanyCity', this.tableData.data[index].id).then(res => {
          this.getCities()
        })
      }).catch(() => {})
    },
    showImport() {
      this.$refs.importModel.open()
    },
    handlerImport(cities) {
      console.log(cities)
      city.import(cities).then(res => {
        if (res.code === 200) {
          this.$refs.importModel.close()
          this.getCities()
        }
      }).catch(res => {})
    }
  }
}
</script>

<style scoped>

</style>
